import React, { FC, ReactNode, useEffect } from "react";
import { useAppDispatch } from "@/store";
import {
  fetchBannerDataAction,
  fetchHotRecommendDataAction,
  fetchNewAlbumDataAction,
  fetchRankingDataAction, fetchSettleSingerDataAction
} from "@/views/discover/c-views/recommend/store/recommend";
import TopBanner from "@/views/discover/c-views/recommend/c-components/top-banner";
import {
  RecommendLeft,
  RecommendRight,
  RecommendSection
} from "@/views/discover/c-views/recommend/style";
import HotRecommend from "@/views/discover/c-views/recommend/c-components/hot-recommend";
import NewAlbum from "@/views/discover/c-views/recommend/c-components/new-album";
import TopRanking from "@/views/discover/c-views/recommend/c-components/top-ranking";
import UserLogin from "@/views/discover/c-views/recommend/c-components/user-login";
import SettleSinger from "@/views/discover/c-views/recommend/c-components/settle-singer";
import HotAnchor from "@/views/discover/c-views/recommend/c-components/hot-anchor";

interface IProps {
  children?: ReactNode;
}

const Recommend: FC<IProps> = (props) => {
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(fetchBannerDataAction());
    dispatch(fetchHotRecommendDataAction());
    dispatch(fetchNewAlbumDataAction());
    dispatch(fetchRankingDataAction());
    dispatch(fetchSettleSingerDataAction());
  }, []);
  return (
    <div>
      <TopBanner></TopBanner>
      <RecommendSection className={"wrap-v2"}>
        <RecommendLeft>
          <HotRecommend></HotRecommend>
          <NewAlbum></NewAlbum>
          <TopRanking></TopRanking>
        </RecommendLeft>
        <RecommendRight>
          <UserLogin></UserLogin>
          <SettleSinger></SettleSinger>
          <HotAnchor></HotAnchor>
        </RecommendRight>
      </RecommendSection>
    </div>
  );
};

export default Recommend;
